<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的佣金</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="page_box" id="app">
			<div class="com_head">
				<h3>{{date}}</h3>
				<ul class="chead_list">
					<li>
						<span>收入</span>
						<span>{{income}}</span>
					</li>
					<li>
						<span>支出</span>
						<span>{{spending > 0 ? '-' + spending : spending}}</span>
					</li>
				</ul>
			</div>
			<div class="date_tab">
				<ul class="date_list">
					<li :class="{'on': dateIndex == i}" v-for="(item,i) in dateList" :key="i" @click="onTab(i)">{{item}}</li>
				</ul>
			</div>
			<div class="com_cont">
				<ul class="com_list">
					<li v-for="(item,i) in commissionList">
						<div class="icon"><img src="__API__/lib/images/yj.png" alt=""></div>
						<div  id="refreshContainer" class="info">
							<div class="left">
								<h3>{{item.type}}</h3>
								<p>{{item.content}}</p>
								<span class="date">{{item.create_time}}</span>
							</div>
							<div class="right">{{item.mark}}{{item.brokerage}}</div>
						</div>
					</li>
				</ul>
			</div>
			<div v-if='has_log == 0'>
				<load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more>
			</div>
			<div v-if='has_log == 1'>
				<load-more tip="正在加载" :show-loading="true"></load-more>
			</div>
			<div v-if='has_log == 2'>
				<load-more tip="没有更多数据了" :show-loading="false" background-color="#fbf9fe"></load-more>
			</div>
		</div>
		<script>

			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					has_log: 0,
					date: '2023-07',
					income_price: '774.71',
					expenditure_price: '1000',
					dateList: [],
					dateIndex: 0,
					income:0,
					spending:0,
					commissionList: [

					]
				},
				created: function() {
					var that = this;
					common.ajax("{:url('Base/get_months')}",{token:localStorage.getItem('token')} , function(res) {
						// common.showToast(res.first_month);
						that.date = res.first_month
						that.dateList =res.data
						common.ajax("{:url('Member/brokerage_records')}",{token:localStorage.getItem('token'),date:that.date} , function(res) {
							//common.showToast(res.msg);
							that.commissionList = res.data.data
							that.income = res.income;
							that.spending = res.spending;
							// that.dateList =res.months

							// that.getData(searchValue);
						})

						// that.getData(searchValue);
					})



				},mounted(){
					//开启滚动事件
					window.addEventListener("load", this.onScroll);
				},
				destroyed(){
					//关闭滚动事件
					window.removeEventListener("load",( this.onScroll));
				},
				methods: {
					goDetail(url) {
						common.openUrl(url)
					},onScroll () {
						console.log(1)
						this.has_log = 1
						let innerHeight = document.querySelector('#app').clientHeight
						let outerHeight = document.documentElement.clientHeight
						let scrollTop = document.documentElement.scrollTop
						 console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
						 console.log(outerHeight + scrollTop - 30)
						 console.log(innerHeight)

						if (outerHeight + scrollTop === innerHeight + 57) {
							if (this.no_data === true) {
								this.has_log = 2
								return false
							}
							this.get('/api/index/index', this.list_param).then((data) => {
								if (data.data.data.length > 0) {
									this.list = [...this.list, ...data.data.data]
									this.list_param.page = this.list_param.page + 1
									this.has_log = 0
								} else {
									this.has_log = 2
									this.no_data = true
								}
							})
						}},
					onTab(i){
						let that=this
						that.dateIndex = i;
						that.date=  that.dateList[i];
						common.ajax("{:url('Member/brokerage_records')}",{token:localStorage.getItem('token'),date:that.date} , function(res) {
							//common.showToast(res.msg);
							that.commissionList = res.data.data
							that.income = res.income;
							that.spending = res.spending;
							// that.getData(searchValue);
						})
					}
				}
			});
		</script>
	</body>

</html>
